/*  header-comment
/*  file   : /Users/allan/Desktop/workSpace/react-hrm-h5/src/modules/leaveJob/index
/*  author : arida
/*  date   : 2017-6-4 18:24:50
/*  last   : 2017-10-2 12:12:17
*/
import React, { Component } from "react";
import PropTypes from "prop-types";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { Button } from "@ali/ding-ui";
import autobind from "autobind-decorator";
import { createForm } from "rc-form";

// actions
import { leaveJob, getAllLeaveReasons } from "../../actions/growth/";
import { fetchCompanyInfo } from "../../actions/finish";

// utils
import { setTitle, close, toast } from "../../utils/dingtalk.js";
import { validator, showMessage } from "../../utils/form.js";
import { get } from "../../utils/db.js";

// less
import "./index.less";
import "../steps/steps.less";

// components
import ProduceComponent from "../../components/produceComponent";
import Select from "../../components/Select/";
import DatePicker from "../../components/DatePicker/";
import InputItem from "../../components/InputItem/";
import Header from "../steps/header";

// 将store注入组件的props
const mapStateToProps = state => ({
  welcome: state.WELCOME_USER,
  finish: state.FINISH_COMPANY
});
// 将action与dispatch进行绑定并注入组件的props
const mapDispatchToProps = dispatch => ({
  // 区分绑定到props的action与传递的props
  actions: bindActionCreators(
    {
      dispatch,
      leaveJob,
      getAllLeaveReasons,
      fetchCompanyInfo
    },
    dispatch
  )
});

@connect(mapStateToProps, mapDispatchToProps)
class LeaveJob extends Component {
  static defaultProps = {};
  // propTypes 验证
  static propTypes = {
    actions: PropTypes.shape({
      dispatch: PropTypes.func.isRequired,
      leaveJob: PropTypes.func.isRequired,
      getAllLeaveReasons: PropTypes.func.isRequired,
      fetchCompanyInfo: PropTypes.func.isRequired
    }).isRequired,
    form: PropTypes.shape({
      getFieldDecorator: PropTypes.func,
      getFieldsValue: PropTypes.func,
      setFieldsValue: PropTypes.func,
      validateFields: PropTypes.func
    })
  };

  constructor(props) {
    super(props);
    setTitle({ title: "双11媒体报名系统" });
  }
  componentWillUpdate() {
    setTitle({
      title: "双11媒体报名系统"
    });
  }
  componentDidMount() {
    this.props.actions.fetchCompanyInfo();
  }

  @autobind
  submit() {
    this.props.form.validateFields(err => {
      if (!err) {
        this.props.actions
          .getAllLeaveReasons({
            userId: get("userId"),
            ...this.props.form.getFieldsValue()
          })
          .then(res => {
            if (res.success) {
              toast({
                text: "已提交",
                onSuccess() {
                  close();
                }
              });
            }
          });
      } else {
        showMessage(err);
      }
    });
  }
  render() {
    const {
      getFieldDecorator,
      setFieldsValue,
      getFieldsValue
    } = this.props.form;

    const company = this.props.finish.company;

    if (company) {
      // avoid block scope by using var
      var {
        companyName = "",
        companyLogo,
        companyBackgroundImg
      } = this.props.finish.company;
    }

    return (
      <div>
        <div className="scroll-body media-collector step-form">
          <Header
            logo={companyLogo}
            isEnjoin={false}
            companyName={companyName}
            background={companyBackgroundImg}
          />
          <ProduceComponent
            list={[
              {
                component: InputItem,
                props: {
                  id: "Country",
                  visible: true,
                  editable: true,
                  required: true,
                  label: "国家"
                }
              },
              {
                component: InputItem,
                props: {
                  value: "",
                  id: "Media Outlet",
                  visible: true,
                  editable: true,
                  required: true,
                  label: "媒体机构"
                }
              },
              {
                component: InputItem,
                props: {
                  value: "",
                  id: "Given Name",

                  visible: true,
                  editable: true,
                  required: true,
                  label: "名"
                }
              },
              {
                component: InputItem,
                props: {
                  value: "",
                  id: "Last Name",

                  visible: true,
                  editable: true,
                  required: true,
                  label: "姓"
                }
              },
              {
                component: InputItem,
                props: {
                  value: "",
                  id: "Title ",

                  visible: true,
                  editable: true,
                  required: true,
                  label: "职衔"
                }
              },
              {
                component: Select,
                props: {
                  value: "",
                  id: "Gender",
                  options: [
                    {
                      label: "男",
                      value: 0
                    },
                    {
                      label: "女",
                      value: 1
                    }
                  ],
                  visible: true,
                  editable: true,
                  required: true,
                  label: "性别"
                }
              },
              {
                component: InputItem,
                props: {
                  value: "",
                  id: "Arrival Date/Time/ Flight No",

                  visible: true,
                  editable: true,
                  required: true,
                  label: "到达日期/时间/ 航班号"
                }
              },
              {
                component: InputItem,
                props: {
                  value: "",
                  id: "Departure Date/ Time/ Flight No",
                  rows: 3,
                  visible: true,
                  editable: true,
                  required: true,
                  label: "回程日期/时间/ 航班号"
                }
              },
              {
                component: DatePicker,
                props: {
                  value: "",
                  id: "Hotel   - Check in Date ",

                  visible: true,
                  editable: true,
                  required: true,
                  label: "酒店-入住日期"
                }
              },
              {
                component: DatePicker,
                props: {
                  value: "",
                  id: "Hotel - Check out Date",

                  visible: true,
                  editable: true,
                  required: true,
                  label: "酒店-退房日期"
                }
              },
              {
                component: InputItem,
                props: {
                  value: "",
                  id: "Dietary Restriction",

                  visible: true,
                  editable: true,
                  required: false,
                  label: "膳食需求"
                }
              },
              {
                component: InputItem,
                props: {
                  value: "",
                  id: "Comment",

                  visible: true,
                  editable: true,
                  required: false,
                  label: "备注"
                }
              }
            ]}
            validator={validator} // form 校验
            getFieldDecorator={getFieldDecorator}
            setFieldsValue={setFieldsValue}
            getFieldsValue={getFieldsValue}
          />
        </div>
        <div className="scroll-btn scroll-btn-preview">
          <Button
            className="preview-button"
            type="primary"
            onClick={this.submit}
          >
            提交
          </Button>
        </div>
      </div>
    );
  }
}

export default createForm()(LeaveJob);
